
<template>
  <div class="yl-container">
    <div class="yl-main">
      <!-- 搜索 -->
      <div class="yl-search-list">
        <el-form :model="searchConfig" ref="searchConfig" :inline="true">
          <el-form-item prop="name">
            <el-input v-model="searchConfig.name" placeholder="请输入系别名字" type="text" size="small"/>
          </el-form-item>
          <el-form-item prop="creator">
            <el-input v-model="searchConfig.creator" placeholder="请输入创建者id" type="text" size="small"/>
          </el-form-item>
          <el-form-item>
            <YlButton uiType="default" icon="el-icon-search" @click="handleSearch">搜 索</YlButton>
            <YlButton uiType="default" btnType="success" icon="iconfont yl-ecs-zhongzhi yl-icon" @click="resetSearch">重 置</YlButton>
          </el-form-item>
        </el-form>
      </div>
      <!-- 按钮组 -->
      <div class="yl-btn-group">
        <YlButton uiType="plain" icon="el-icon-circle-plus-outline" @click="initAdd">新增</YlButton>
      </div>
      <!-- table 列表组 -->
      <div class="yl-table-list">
        <el-table
          v-loading="loading"
          element-loading-text="玩命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          border
          stripe
          style="width: 100%"
          :data="tableData"
        >
           <el-table-column
             type="selection"
             width="60px"
             align="center"
             style="padding-right: 10px"
           />
          <el-table-column align="center" label="序号" width="100px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"  label="系别名称" prop="nns_name" show-overflow-tooltip />
          <el-table-column align="center"  label="创建者" prop="nns_creator_name" show-overflow-tooltip />
          <el-table-column align="center"  label="创建者id" prop="nns_creator_id" show-overflow-tooltip />
          <el-table-column align="center"  label="创建时间" prop="nns_create_time" show-overflow-tooltip />
          <el-table-column align="center"  label="提交时间" prop="nns_modify_time" show-overflow-tooltip />
          <el-table-column label="操作" width="200" fixed="right">
            <template slot-scope="scope">
              <YlButton uiType="main" icon="iconfont yl-ecs-bianji yl-icon" @click="handleShowSingle(scope.row)">编辑</YlButton>
              <YlButton uiType="main" btnType="danger" icon="iconfont yl-ecs-shanchu yl-icon" @click="handledelete(scope.row.nns_id)">删除</YlButton>
            </template>
          </el-table-column>
          <div class="yl-table-empty" slot="empty">
            <img src="~@/assets/icons/svg/no-data.svg">
            <div>暂无数据</div>
          </div>
        </el-table>
        <!-- 分页模块 -->
        <YlPage
          :size="size"
          :page="page"
          :total="total"
          @page-size="handlePageSize"
          @current-page="handleCurrentPage"
        />
      </div>
      <!-- 新增 修改dialog -->
      <el-dialog :title="formConfig.isFix ? '修改系别' : '新增系别'" :visible.sync="dialogFormVisible" class="yl-dialog">
        <YlForm
          ref="ylform"
          :formConfig="formConfig"
          @close-dialog="getCloseDialog"
          @init-state="getInitState"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 轮播框
      loading: false,
      // 列表数据
      tableData: [],
      // 搜索框
      searchConfig: {
        name: '',
        creator: ''
      },
      formConfig: {
        changeId: '',
        isFix: false,
        btnMethod: ['submit', 'cancel'],
        formData: {
          name: ''
        },
        editRules: {
          name: [
            { required: true, message: '请输入添加的系别名', trigger: 'blur' }
          ]
        },
        columns: [
          {
            type: 'input',
            label: '系别名称',
            prop: 'name'
          }
        ],
        addApi: this.$ylapi.addNewDepart,
        changeApi: this.$ylapi.changeDepartInfo
      },
      // 分页
      page: 1,
      size: 10,
      total: 0,
      dialogFormVisible: false,
      changeId: ''
    }
  },
  created () {
    this.loading = true
    this.initTable()
  },
  methods: {
    // 新增初始化
    initAdd () {
      this.formConfig.isFix = false
      this.dialogFormVisible = true
      this.formConfig.btnMethod = ['submit', 'cancel']
      this.initForm(this.formConfig.formData)
    },
    // 初始化数据
    async initData (page_size = this.size, page = this.page) {
      let data = await this.$ylapi.getPersonialDepart({
        page_size,
        page,
        ...this.searchConfig
      })
      this.loading = false
      this.page = data.page
      this.total = data.total
      this.tableData = data.list
    },
    // 初始化列表
    initTable () {
      this.$nextTick(() => this.$refs['searchConfig'].resetFields())
      this.dialogFormVisible = false
      this.searchConfig.name = ''
      this.searchConfig.creator = ''
      this.loading = true
      this.initData(10, 1)
    },
    // 搜索
    handleSearch () {
      this.loading = true
      this.initData(10, 1)
    },
    // 重置搜索
    resetSearch () { this.initTable() },
    // 编辑回显
    handleShowSingle ({ nns_id, nns_name }) {
      this.formConfig.changeId = nns_id
      this.formConfig.formData.name = nns_name
      this.formConfig.btnMethod = ['save', 'cancel']
      this.formConfig.isFix = true
      this.dialogFormVisible = true
    },
    // 删除
    async handledelete (id) {
      // eslint-disable-next-line no-unused-expressions
      await this.$modal.confirm(this, {
        api: this.$ylapi.deleteDepart,
        obj: id
      })
        ? this.initTable()
        : ''
    },
    // 分页---页容量选择器
    handlePageSize (val) {
      this.size = val
      this.loading = true
      this.initData()
    },
    // 分页
    handleCurrentPage (val) {
      this.page = val
      this.loading = true
      this.initData()
    },
    // 初始化
    getInitState (val) {
      if (val) {
        this.initTable()
      }
    },
    // 关闭弹窗
    getCloseDialog (val) { this.dialogFormVisible = val }
  }
}
</script>
<style lang="scss" scoped></style>
